import React from 'react';
import { connect } from 'react-redux'
import menuRoute from "routes/menuRoute";
import {Button, Icon, Divider, Form, Row, Col, Switch, Spin, message} from 'antd';
const FormItem = Form.Item;
import subApplicationService from 'containers/setting/sub-application/sub-application.service'
import {messages} from "share/common";
import firstPage from 'images/setting/sub-application/module-display-index.jpg'
import firstPageEn from 'images/setting/sub-application/module-display-index-en.jpg'
import firstPageJp from 'images/setting/sub-application/module-display-index-jp.jpg'
import 'styles/setting/sub-application/module-display-index.scss'

class ModuleDisplayIndex extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      loading: false,
      data: [],
      record: {
        enableQrcode: true,//扫一扫
        enableApproval: true,//审批
        enableDocstatus: true,//单据动态
        enableFastitem: true,//快速创建
        enableBusinessTravel: true,//商务出行
      },
      subApplication: menuRoute.getRouteItem('sub-application', 'key').url,   //子应用的页面项
    }
  }


  componentWillMount () {
    this.getHomePageCardDetail();
  }

  componentDidMount () {
    if(window.location.href.indexOf("privatization") !== -1){
      this.setState({
        subApplication: menuRoute.getRouteItem('sub-application-privatization','key'),//子应用管理私有化的页面项,
      })
    }
  }

  //获取映射关系
  getHomePageCardDetail = () => {
    subApplicationService.getHomePageCardDetail().then(res => {
        this.setState({
          record: res.data,
        })
      }
    ).catch(err => {
    })
  };

  handleSave = () => {
    this.props.form.validateFieldsAndScroll((err, values) => {
      if(!err){
        this.setState({
          loading: true,
        });
        let item =Object.assign(this.state.record, values);
        subApplicationService.editHomePageCardDetail(item).then(res => {
          this.setState({
            visible: false,
            loading: false,
          });
          message.success(messages('budget-setting.key31'/*保存成功！*/));
          this.getHomePageCardDetail();
        }).catch(err => {
          this.setState({
            visible: false,
            loading: false,
          })
        })
      }
    });
  };

  handleCancel = () => {
    this.props.form.resetFields();
    this.setState({
      visible: false,
    })
  };

  render () {
    const {record, loading} = this.state;
    const {getFieldDecorator} = this.props.form;
    const formItemLayout = {
      labelCol: { span:7 },
      wrapperCol: { span:4 }
    };
    let lan = this.props.language.code.toLowerCase();
    const img = (
      (lan === 'zh_cn' || lan === 'zh_tw') ? firstPage : (lan === 'en' ? firstPageEn : firstPageJp)
    );
    return (
      <div>


          <div  className={'module-display-index'}>
            <div className="left-img-area">
              <div style={{marginLeft: 50}}>
              <img src={img} width={320} height={428}/>
              </div>
            </div>
            <div className="right-content-area">
              <div style={{color: '#656565', fontWeight: 650, fontSize: 18, marginBottom: 30}}>
                {messages('setting.key1596')/*首页可见设置*/}
              </div>
              <Form style={{margin: 0}}>
                <FormItem {...formItemLayout} colon={false}
                          label={
                            <div style={{textAlign: 'left'}}>
                              <div>{messages('setting.key1861')/*扫一扫*/}</div>
                            </div>}>
                  {getFieldDecorator('enableQrcode', {
                    valuePropName: 'checked',
                    initialValue: record.enableQrcode,
                  })(
                    <Switch/>
                  )}
                </FormItem>
                <FormItem {...formItemLayout} colon={false}
                          label={
                            <div style={{textAlign: 'left'}}>
                              <div>{messages('setting.key1248')/*审批*/}</div>
                              <div style={{fontSize: 13, color: '#999'}}>{messages('setting.key1600')/*一览待您审批的单据*/}</div>
                            </div>}>
                  {getFieldDecorator('enableApproval', {
                    valuePropName: 'checked',
                    initialValue: record.enableApproval,
                  })(
                    <Switch/>
                  )}
                </FormItem>
                <FormItem {...formItemLayout} colon={false}
                          label={
                            <div style={{textAlign: 'left'}}>
                              <div>{messages('setting.key1862')/*单据动态*/}</div>
                              <div style={{fontSize: 13, color: '#999'}}>{messages('setting.key1598')/*一览近期单据动态*/}</div>
                            </div>}>
                  {getFieldDecorator('enableDocstatus', {
                    valuePropName: 'checked',
                    initialValue: record.enableDocstatus,
                  })(
                    <Switch/>
                  )}
                </FormItem>
                <FormItem {...formItemLayout} colon={false}
                          label={
                            <div style={{textAlign: 'left'}}>
                              <div>{messages('setting.key1776')/*商务出行*/}</div>
                            </div>}>
                  {getFieldDecorator('enableBusinessTravel', {
                    valuePropName: 'checked',
                    initialValue: record.enableBusinessTravel,
                  })(
                    <Switch/>
                  )}
                </FormItem>
                <FormItem {...formItemLayout} colon={false}
                          label={
                            <div style={{textAlign: 'left'}}>
                              <div>{messages('setting.key1777')/*快速创建*/}</div>
                              <div style={{fontSize: 13, color: '#999'}}>{messages('setting.key1602')/*快速创建单据或费用*/}</div>
                            </div>}>
                  {getFieldDecorator('enableFastitem', {
                    valuePropName: 'checked',
                    initialValue: record.enableFastitem,
                  })(
                    <Switch/>
                  )}
                </FormItem>
              </Form>
            </div>
          </div>
        <Button type="primary"
                loading={loading}
                style={{marginLeft: 50, marginTop: 10}}
                onClick={this.handleSave}>
          {messages('common.save')/*保存*/}
        </Button>
      </div>
    )
  }
}

ModuleDisplayIndex.contextTypes = {
  router: React.PropTypes.object
};

function mapStateToProps(state) {
  return {
    language: state.main.language
  }
}


const wrappedEditHomePageCard = Form.create()(ModuleDisplayIndex);
export default connect(mapStateToProps)(wrappedEditHomePageCard);
